<template>
  <div class="container">
        <!-- header部分 -->
        <header>
            <div class="icon-location-box">
                <div class="icon-location"></div>
            </div>
            <div class="current-address">
                沈阳市规划大厦
                <i class="fa fa-caret-down"></i>
            </div>
        </header>

        <!-- 搜索部分 -->
        <div class="search">
            <div class="search-fixed" ref="fixed"><!-- 设置固定定位会脱离文档流，再套一层div占住原来的位置 -->
                <div class="search-box">
                    <i class="fa fa-search"></i>
                    搜索饿了么商家、商品名称
                </div>
            </div>
            
        </div>

        <!-- 食品类型选择  10个 -->
        <ul class="food-type">
            <li @click="toBusinessList(1)">
                <img src="../assets/dcfl01.png" alt="">
                <p>美食</p>
            </li>
            <li @click="toBusinessList(2)">
                <img src="../assets/dcfl02.png" alt="">
                <p>早餐</p>
            </li>
            <li @click="toBusinessList(3)">
                <img src="../assets/dcfl03.png" alt="">
                <p>跑腿代购</p>
            </li>
            <li @click="toBusinessList(4)">
                <img src="../assets/dcfl04.png" alt="">
                <p>汉堡代购</p>
            </li>
            <li @click="toBusinessList(5)">
                <img src="../assets/dcfl05.png" alt="">
                <p>甜品饮品</p>
            </li>
            <li @click="toBusinessList(6)">
                <img src="../assets/dcfl06.png" alt="">
                <p>素食简餐</p>
            </li>
            <li @click="toBusinessList(7)">
                <img src="../assets/dcfl07.png" alt="">
                <p>地方小吃</p>
            </li>
            <li @click="toBusinessList(8)">
                <img src="../assets/dcfl08.png" alt="">
                <p>米粉面馆</p>
            </li>
            <li @click="toBusinessList(9)">
                <img src="../assets/dcfl09.png" alt="">
                <p>包子粥铺</p>
            </li>
            <li @click="toBusinessList(10)">
                <img src="../assets/dcfl10.png" alt="">
                <p>炸鸡炸串</p>
            </li>
        </ul>

        <!-- 横幅广告 -->
        <div class="banner">
            <h3>品质套餐</h3>
            <p>搭配齐全吃得好</p>
            <a href="#">立即抢购 &gt;</a>
        </div>

        <!-- 超级会员 -->
        <div class="supermember">
            <div class="supermember-left">
                <img src="../assets/super_member.png" alt="">
                <h3>超级会员</h3>
                <p>&#8226; 每月享超值权益</p>
            </div>
            <div class="supermember-right">
                立即开通 &gt;
            </div>
        </div>

        <!-- 推荐商家 -->
        <div class="recommend">
            <div></div>
            <p>推荐商家</p>
            <div></div>
        </div>

        <!-- 推荐方式 -->
        <ul class="recommend-type">
            <li>综合排序<i class="fa fa-caret-down"></i></li>
            <li>距离最近</li>
            <li>销量最高</li>
            <li>筛选<i class="fa fa-filter"></i></li>
        </ul>

        <!-- 商家列表 -->
        <ul class="business-list">
            <li>
                <img src="../assets/sj01.png" alt="">
                <div class="business-info">
                    <!-- 第一行 -->
                    <div class="title">
                        <h3>万家饺子 (软件园E18店)</h3>
                        <div class="business-info-icon">&#8226;</div>
                    </div>
                    <!-- 第二行 -->
                    <div class="mark">
                        <div class="mark-star">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="mark-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <!-- 第三行 -->
                    <div class="delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 32分钟</p>
                    </div>
                    <!-- 第四行 -->
                    <div class="explain">
                        <span>各种饺子</span> 
                    </div>
                    <!-- 第五行 -->
                    <div class="promotion">
                        <div class="promotion-left">
                            <div>
                                新
                            </div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <!-- 第六行 -->
                    <div class="promotion">
                        <div class="promotion-left">
                            <div style="background-color: #f1884f;">
                                特
                            </div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="../assets/sj02.png" alt="">
                <div class="business-info">
                    <!-- 第一行 -->
                    <div class="title">
                        <h3>小锅饭豆腐馆 (全运店)</h3>
                        <div class="business-info-icon">&#8226;</div>
                    </div>
                    <!-- 第二行 -->
                    <div class="mark">
                        <div class="mark-star">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="mark-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <!-- 第三行 -->
                    <div class="delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 32分钟</p>
                    </div>
                    <!-- 第四行 -->
                    <div class="explain">
                        <span>各种饺子</span> 
                    </div>
                    <!-- 第五行 -->
                    <div class="promotion">
                        <div class="promotion-left">
                            <div>
                                新
                            </div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <!-- 第六行 -->
                    <div class="promotion">
                        <div class="promotion-left">
                            <div style="background-color: #f1884f;">
                                特
                            </div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="../assets/sj03.png" alt="">
                <div class="business-info">
                    <!-- 第一行 -->
                    <div class="title">
                        <h3>麦当劳麦乐送 (全运路店)</h3>
                        <div class="business-info-icon">&#8226;</div>
                    </div>
                    <!-- 第二行 -->
                    <div class="mark">
                        <div class="mark-star">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="mark-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <!-- 第三行 -->
                    <div class="delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 32分钟</p>
                    </div>
                    <!-- 第四行 -->
                    <div class="explain">
                        <span>各种饺子</span> 
                    </div>
                    <!-- 第五行 -->
                    <div class="promotion">
                        <div class="promotion-left">
                            <div>
                                新
                            </div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <!-- 第六行 -->
                    <div class="promotion">
                        <div class="promotion-left">
                            <div style="background-color: #f1884f;">
                                特
                            </div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="../assets/sj04.png" alt="">
                <div class="business-info">
                    <!-- 第一行 -->
                    <div class="title">
                        <h3>米村拌饭 (浑南店)</h3>
                        <div class="business-info-icon">&#8226;</div>
                    </div>
                    <!-- 第二行 -->
                    <div class="mark">
                        <div class="mark-star">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="mark-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <!-- 第三行 -->
                    <div class="delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 32分钟</p>
                    </div>
                    <!-- 第四行 -->
                    <div class="explain">
                        <span>各种饺子</span> 
                    </div>
                    <!-- 第五行 -->
                    <div class="promotion">
                        <div class="promotion-left">
                            <div>
                                新
                            </div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <!-- 第六行 -->
                    <div class="promotion">
                        <div class="promotion-left">
                            <div style="background-color: #f1884f;">
                                特
                            </div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <img src="../assets/sj05.png" alt="">
                <div class="business-info">
                    <!-- 第一行 -->
                    <div class="title">
                        <h3>申记串道 (中海康城店)</h3>
                        <div class="business-info-icon">&#8226;</div>
                    </div>
                    <!-- 第二行 -->
                    <div class="mark">
                        <div class="mark-star">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <p>4.9 月售345单</p>
                        </div>
                        <div class="mark-right">
                            蜂鸟专送
                        </div>
                    </div>
                    <!-- 第三行 -->
                    <div class="delivery">
                        <p>&#165;15起送 | &#165;3配送</p>
                        <p>3.22km | 32分钟</p>
                    </div>
                    <!-- 第四行 -->
                    <div class="explain">
                        <span>各种饺子</span> 
                    </div>
                    <!-- 第五行 -->
                    <div class="promotion">
                        <div class="promotion-left">
                            <div>
                                新
                            </div>
                            <p>饿了么新用户首单立减9元</p>
                        </div>
                        <div class="promotion-right">
                            <p>2个活动</p>
                            <i class="fa fa-caret-down"></i>
                        </div>
                    </div>
                    <!-- 第六行 -->
                    <div class="promotion">
                        <div class="promotion-left">
                            <div style="background-color: #f1884f;">
                                特
                            </div>
                            <p>特价商品5元起</p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../components/Footer'
export default {
    name:'Home',
    components:{
        Footer
    },
    methods:{
        toBusinessList(orderTypeId){
            //跳转到商家列表页，并将类型带过去
            this.$router.push({path:'/businesslist',query:{'orderTypeId':orderTypeId}})
        }
    },
    mounted(){
        //这是PC端和手机端 都支持的事件
        window.onscroll = ()=>{
            //获取滚动条的位置
            //pc端滚动距离
            let pctop = window.document.documentElement.scrollTop;
            //手机端滚动距离
            let mobiletop = window.document.body.scrollTop;
            //如果获取不到，则为0，用三目运算符进行判断挑选
            let usertop = pctop == 0 ? mobiletop : pctop;

            //获取当前屏幕的width
            let curwidth = window.document.documentElement.clientWidth;

            let search = this.$refs.fixed;

            //判断滚动距离如果大于等于12%个width
            //那么更改dom为固定定位，反之变成静态定位
            if (usertop>=curwidth*0.12) {
                search.style.position='fixed';
                search.style.left=0;
                search.style.top=0;
            }else{
                search.style.position='static';
            }
        }
    },
    destroyed(){
        window.onscroll = null;
    }
}
</script>

<style scoped>
/* *********************** header部分 ***************************** */
.container header{
    width: 100%;
    height: 12vw;
    background-color: #0097ff;
    display: flex;
    align-items: center;
}
.container header .current-address{
    font-size: 4.5vw;
    font-weight: bold;
    color: white;
}
/* *********************** search部分 ***************************** */
.container .search{
    width: 100%;
    height: 13vw;
}
.container .search .search-fixed{
    width: 100%;
    height: 13vw;
    background-color: #0097ff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .search .search-fixed .search-box{
    width: 90%;
    height: 9vw;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #aeaeae;
    font-size: 3.5vw;
    font-family: 宋体;
    user-select: none;
}
.container .search .search-fixed .search-box i{
    margin-right: 1vw;
}
/* *********************** 食品类型选择 部分 ***************************** */
.container .food-type{
    width: 100%;
    height: 48vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
}
.container .food-type li{
    width: 18vw;
    height: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.container .food-type li img{
    width: 12vw;
    height: 10.3vw;
}
.container .food-type li p{
    font-size: 3.2vw;
    color: #666;
    user-select: none;
}
/* *********************** 横幅广告 部分 ***************************** */
.container .banner{
    width: 95%;
    height: 29vw;
    background-image: url(../assets/index_banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 2vw 6vw;
}
.container .banner h3{
    font-size: 4.2vw;
    margin-bottom: 1.2vw;
}
.container .banner p{
    font-size: 3.4vw;
    color: #666;
    margin-bottom: 2.4vw;
}
.container .banner a{
    font-size: 3vw;
    color: #c79060;
    font-weight: bold;
}
/* *********************** 超级会员 部分 ***************************** */
.container .supermember{
    width: 95%;
    height: 11.5vw;
    background-color: #feedc1;
    margin: 1.3vw auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #644f1b;
}
.container .supermember .supermember-left{
    display: flex;
    align-items: center;
    margin-left: 4vw;
}
.container .supermember .supermember-left img{
    width: 6vw;
    height: 6vw;
    margin-right: 2vw;
}
.container .supermember .supermember-left h3{
    font-size: 4vw;
    margin-right: 2vw;
}
.container .supermember .supermember-left p{
    font-size: 3vw;
}
.container .supermember .supermember-right{
    font-size: 3vw;
    margin-right: 4vw;
}
/* *********************** 推荐商家 部分 ***************************** */
.container .recommend{
    width: 100%;
    height: 14vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .recommend div{
    width: 6vw;
    height: 0.2vw;
    background-color: #888;
}
.container .recommend p{
    font-size: 4vw;
    margin: 0 4vw;
}
/* *********************** 推荐方式 部分 ***************************** */
.container .recommend-type{
    width: 100%;
    height: 5vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 3.5vw;
    color: #555;
    margin-bottom: 5vw;
}
/* *********************** 商家列表 部分 ***************************** */
.container .business-list{
    width: 100%;
}
.container .business-list li{
    box-sizing: border-box;
    padding: 2.5vw;
    border-bottom: 1px solid #ddd;
    display: flex;

}
.container .business-list li img{
    width: 18vw;
    height: 18vw;
}
.container .business-list li .business-info{
    width: 100%;
    padding-left: 3vw;
}
.container .business-list li .business-info .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
}
.container .business-list li .business-info .title h3{
    font-size: 4vw;
    color: #333;
}
.container .business-list li .business-info .mark{
    font-size: 3.1vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
}
.container .business-list li .business-info .mark .mark-star{
    color: #ffc80e;
    display: flex;
    align-items: center;
}
.container .business-list li .business-info .mark .mark-star i{
    margin-right: 0.5vw;
}
.container .business-list li .business-info .mark .mark-star p{
    color: #666;
    margin-left: 1vw;
}
.container .business-list li .business-info .mark .mark-right{
    background-color: #0097ff;
    border-radius: 2px;
    color: white;
    padding: 0 0.6vw;
    font-size: 2.4vw;
}
.container .business-list li .business-info .delivery{
    font-size: 3.1vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
}
.container .business-list li .business-info .explain{
    font-size: 2.8vw;
    color: #666;
    margin-bottom: 3vw;
}
.container .business-list li .business-info .explain span{
    border: 1px solid #ddd;
    border-radius: 3px;
}
.container .business-list li .business-info .promotion{
    margin-bottom: 1.8vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.container .business-list li .business-info .promotion .promotion-left{
    display: flex;
    align-items: center;
}
.container .business-list li .business-info .promotion .promotion-left div{
    border-radius: 3px;
    font-size: 3vw;
    background-color: #70bc46;
    width: 4vw;
    height: 4vw;
    color: white;
    text-align: center;
    line-height: 4vw;
}
.container .business-list li .business-info .promotion .promotion-left p{
    font-size: 3vw;
    color: #666;
    margin-left: 2vw;
}
.container .business-list li .business-info .promotion .promotion-right{
    display: flex;
    align-items: center;
    font-size: 2.5vw;
    color: #999;
}
.container .business-list li .business-info .promotion .promotion-right p{
    margin-right: 2vw;
}
</style>